<template>
  <div>
    <ul>
      <div class="con">
        <transition-group name="todo" appear>
          <MyItem v-for="todo in todos" :todo="todo" :key="todo.id"/>
        </transition-group>
      </div>
    </ul>
  </div>
</template>

<script>
import MyItem from "@/components/MyItem";
export default {
  name:'MyList',
  components:{MyItem},
  props:['todos']
}
</script>

<style scoped lang="less">
ul{
  .con{
    //width: 95%;
    //margin: auto;
    border-bottom: 1px solid rgba(87, 87, 87, 0.3);
    border-left: 1px solid rgba(87, 87, 87, 0.3);
    border-right: 1px solid rgba(87, 87, 87, 0.3);
    margin: 0px 8px;
    //background-color: pink;
  }
}
//添加与删除时候透明度变化
.todo-enter-active{
  animation: trans 1s linear;
}
.todo-leave-active{
  animation: trans 1s linear reverse;
}
@keyframes trans {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}
</style>

